<template>
  <!-- 实时工单列表 -->
  <div class="workOrders">
    <div class="title text-shadow">实时工单列表</div>
    <div class="table-title">
      <p>合同编号</p>
      <p>产品</p>
      <p>设备</p>
      <p>时长</p>
      <p>开始时间</p>
    </div>
    <vue3-seamless-scroll
      :list="list"
      :hover="true"
      :limitScrollNum="12"
      :step="0.4"
      class="table-list"
    >
      <div class="table-row" v-for="(item, index) in list" :key="index">
        <div
          class="table-row-inner"
          :class="{ 'table-row-inner-1': index % 2 }"
        >
          <p>{{ item.contractCode }}</p>
          <el-tooltip effect="light" :content="item.product" placement="top">
            <p>{{ item.productsName }}</p>
          </el-tooltip>
          <p>{{ item.equipmentCode }}</p>
          <p>{{ item.finishHour }}</p>
          <p>{{ item.startTime }}</p>
        </div>
      </div>
    </vue3-seamless-scroll>
  </div>
</template>
<script>
export default {
  name: 'workOrderList',
  data () {
    return {
      list: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    async getList () {
      let { data } = await this.$API.produce.workOrder.getWorkOrderList.get()
      this.list = data
      this.list.forEach(item => {
        item.startTime = item.startTime.slice(0, -3)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.workOrders {
  width: 25%;
  height: 100%;
  overflow: hidden;
  .table-title {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 20px;
    width: 100%;
    height: 40px;
    background: linear-gradient(
      to bottom,
      #022670 20px,
      rgba(133, 162, 222, 0.5) 30px
    );
    border-bottom: 3px #85a2de solid;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 6px; /* 三角形的宽度 */
      height: 6px; /* 三角形的高度 */
      background: #51e0ff;
      clip-path: polygon(0 0, 100% 0, 0 100%); /* 切掉四个角 */
      background-clip: padding-box; /* 背景限制在内边距盒内 */
    }
    p {
      flex: 1;
      text-align: center;
      font-size: 14px;
    }
  }
  .table-list {
    overflow: hidden;
  }
  .table-row {
    position: relative;
    margin-top: 20px;
    width: 100%;
    height: 40px;
    padding: 1px;
    background: linear-gradient(135deg, transparent 5px, #4c70c7 0);

    // background-color: #51e0ff;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 6px; /* 三角形的宽度 */
      height: 6px; /* 三角形的高度 */
      background: #51e0ff;
      clip-path: polygon(0 0, 100% 0, 0 100%); /* 切掉四个角 */
      background-clip: padding-box; /* 背景限制在内边距盒内 */
    }
  }
  .table-row-inner {
    display: flex;
    align-items: center;
    padding: 0 2px;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 5px, #0e214c 0);
    p {
      flex: 1;
      text-align: center;
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .table-row-inner-1 {
    background: linear-gradient(135deg, transparent 5px, #162c5e 0);
  }
}
</style>